<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">

    <body>

        <ui:composition template="./AlumnoTemplate.xhtml">
            <ui:define name="top"></ui:define>
            <ui:define name="left"></ui:define>
            <ui:define name="right"></ui:define>

            <ui:define name="content">
                <h:form id ="form">
                    <p:panel header="Búsqueda Avanzada de vacantes"  toggleable="true" collapsed="false"> 
                        <h:panelGrid columns="3" >                            

                            <h:outputText value="Buscar Vacantes: " style="width: auto"/>
                            <p:inputText value="#{alumnoActionListener.descripcionVacBus}" size="50"/>   

                            <p:commandButton value="Buscar por localización geográfica" actionListener="#{alumnoActionListener.buscarVacantesAvanzada}" update="form"/>

                            <h:outputLabel value="Ingresa el cuadro de búsqueda en Kilómetros. (Predeterminado 10Km) "></h:outputLabel>
                            <h:inputText value="#{alumnoActionListener.radioBusqueda}" size="50"></h:inputText>


                            <p:commandButton  action ="AlumnoBuscarVacantes.xhtml" value="Regresar" ajax="false"/>

                            <h:outputLabel value="Ingresa la localización de donde partirá la búsqueda en el mapa de abajo."></h:outputLabel>
                            <h:outputLabel value="" ></h:outputLabel>

                        </h:panelGrid>   
                        <br></br>
                        <f:view contentType="text/html">


                            <br></br>

                            <p:gmap center="#{alumnoActionListener.latitud}, #{alumnoActionListener.longitud}" zoom="15" 
                                    type="ROADMAP" style="width:600px;height:400px"  widgetVar="map"
                                    mapTypeControl="true" navigationControl="true" 
                                    streetView="false" onPointClick="handlePointClick(event);"
                                    model="#{alumnoActionListener.emptyModel}" 
                                    overlaySelectListener="#{alumnoActionListener.emptyModel}"
                                    >

                            </p:gmap>


                        </f:view>

                        <p:messages id="msgs" showDetail="true" />
                        <p:dialog widgetVar="dlg" visible="false" header="Confirmación de:">                                                    
                            <h:panelGrid columns="2">

                                <h:outputLabel for="title" value="Lugar de inicio" />                                  

                                <f:facet name="footer">
                                    <p:commandButton value="Aceptar" 
                                                     update="msgs" 
                                                     oncomplete="markerAddComplete()"/>
                                    <p:commandButton value="Cancelar" onclick="return cancel()"/>
                                </f:facet>
                            </h:panelGrid>

                            <h:inputHidden id="lat" value="#{alumnoActionListener.latitud}" />
                            <h:inputHidden id="lng" value="#{alumnoActionListener.longitud}" />                                                    
                        </p:dialog>
                    </p:panel>  

                    <br></br><br></br>

                    <p:dataTable var="vac" value="#{alumnoActionListener.vacantesBuscadas}" selectionMode="single"  paginator="true" rows="1">  


                        <p:column>     
                            <f:facet name="header">  
                                Vacantes encontradas de acuerdo a su búsqueda:
                            </f:facet>  

                            <h:outputText value=" Distancia desde el punto de partida: #{vac.distanciaMax} Kms" escape="false" style="color:red; font-size: 16px; font-style: oblique"></h:outputText>

                            <br></br>

                            <h:outputText value="#{vac.htmlDescripcion}" escape="false" />                                                        

                            <br></br> <br></br>


                            <p:commandButton  title="View" value="Postularse" action="#{alumnoActionListener.postularVacante}">  
                                <f:setPropertyActionListener value="#{vac}" target="#{alumnoActionListener.vacanteSeleccionada}" />  
                            </p:commandButton>    

                            <br></br><br></br>

                            <f:view contentType="text/html">


                                <br></br>

                                <p:gmap center="#{vac.latitud}, #{vac.longitud}" zoom="15" 
                                        type="ROADMAP" style="width:600px;height:400px"  widgetVar="map"
                                        mapTypeControl="true" navigationControl="true" 
                                        streetView="false" onPointClick="handlePointClick(event);"
                                        model="#{vac.emptyModel}" 
                                        overlaySelectListener="#{vac.emptyModel}"
                                        >
                                </p:gmap>


                            </f:view>                         





                        </p:column>


                        <p:messages id="msgs" showDetail="true" /> <br></br> 
                    </p:dataTable>  

                    <p:dialog header="Busqueda de Vacantes" widgetVar="exitoDialogo" resizable="false" id="carDlg"  
                              showEffect="fade" hideEffect="explode" modal="true">
                        <h:outputLabel value="Éxito"/>
                    </p:dialog>

                </h:form>
            </ui:define>

            <ui:define name="bottom"></ui:define>
        </ui:composition>

    </body>
</html>
